Slick Modal - HTML5 and CSS3 modal popups

Documentation

• Created: 30.07.2015
• Latest Update: 16.08.2017
• Created by: Capelle
• Profile: www.codecanyon.net/user/capelle/portfolio
• Support: support@justcapelle.com

Thank you for choosing Slick Modals

Before you get started i suggest you read the documentation and incase you have an issue or you need help, feel free to contact me via email or PM on Codecanyon.

Overview

Slick Modal are HTML5 and CSS3 popups, which are ment to be easely implementated into almoust any website or CMS system with some basic knowledge of HTML, CSS and/or server side scripting.
It is a framework for easy installation, customization and development. It is not a CMS plugin, module or widget hence it needs to be installed manually. Slick Modals does not contain premade popup designs, it is a layout/framework popup for your custom popup design/s for static websites or dynamic (CMS).

• Google Chrome 20+
• Opera 12+
• Firefox 20+
• Safari 7+ (OSX)
• Internet Explorer 10+

Slick Modal is made to be used for popups with fixed dimensions. If you plan to use responsive content, it's best to adapt your content with css media queries. You can also check the responsive demo (Contact form - responsive) which servers as a simple guide for you to create your modal content responsive. More about media queries on W3Schools.

1. Quick start - includes a single demo for a quick start
2. Demo layouts - included basic demo layouts for reference
3. Slick Stats - statistics for Slick Modal(s)
4. Modal generator - quick modal settings generator
5. Documentation
6. assets - all main plugin and support demo files (css and js)
7. changelog.txt

The structure

Slick Modal popup is made from the html elements which define the layout, CSS for basic layout design and JS plugin, which controls the functionality part of the popup.

The html is very minimal. It consist from unique ID, which is the parent for the window element that holds our popup content inside.

<!-- ========== START COPYING HERE ========== -->
	<div id="popup-1" class="slickModal">
		<div class="slickWindow">
			<!-- Your popup content -->
			... your content goes here ...
			<!-- / Your popup content -->
		</div>
	</div>
<!-- ========== END COPYING HERE ========== -->

• Main selector has an ID, which defines the popup as unique element on the page.
• Main selector has class "slickModal" which defines him appropriate styles from the css and functionlities from the jQuery plugin.
• jQuery plugin dynamically creates an overlay within the main selector if we give it that option inside the plugin.
• Main selector holds the "slickWindow" element, which is our content wrapper and a popup. Inside it you copy your elements which will be visible upon modal visibility.
• jQuery plugin dynamically creates closeModal element, which is our closing button/label.

The CSS is made for basic popup styling and layout functionlities. It can be modified if needed but most of our styling here is just a basic fallback if none of the jQuery plugin options are selected. The CSS structure is made from:

• Reset and basics - reset styles to give our popup consistency across the browsers.
• Background defaults - here are default settings for the background effects.
• Modal window positions - positions for the our popup window.
• Transition definitions - predefined window transition timings.
• Close buttons - styling for the close buttons.

jQuery plugin controls the functionality part of the popup. We invoke/call our options right inside the js file. Below is an example of a simple popup with all possible options for usage:

// Slick modal settings
$(document).ready(function() {

    // Modal 1
    $('#popup-1').slickModals({
        // Hide on pages
        hideOnPages: [
            '/foo/page1/',
            '/foo/page2/',
            '/foo/page3/'
        ],
        // Popup type
        popupType: 'delayed',
        delayTime: 1000,
        scrollTopDistance: 400,
        // Auto closing
        autoClose: false,
        autoCloseDelay: 3000,
        // Statistics
        enableStats: false,
        fileLocation: 'slickStats/collect.php',
        modalName: 'My awesome modal 1',
        modalSummary: 'Lorem ipsum dolor sit amet',
        callToAction: 'cta',
        // Popup cookies
        setCookie: true,
        cookieDays: 30,
        cookieTriggerClass: 'setCookie-1',
        cookieName: 'slickModal-1',
        cookieScope: 'domain',
        // Overlay styling
        overlayVisible: true,
        overlayClosesModal: true,
        overlayColor: 'rgba(0,0,0,0.85)',
        overlayAnimationDuration: '0.4',
        overlayAnimationEffect: 'fadeIn',
        // Background effects
        pageAnimationDuration: '0.4',
        pageAnimationEffect: 'scale',
        pageBlurRadius: '1px',
        pageScaleValue: '0.9',
        pageMoveDistance: '30%',
        // Popup styling
        popupWidth: '480px',
        popupHeight: '280px',
        popupLocation: 'bottomRight',
        popupAnimationDuration: '0.4',
        popupAnimationEffect: 'zoomIn',
        popupBoxShadow: '0 0 20px 0 rgba(0,0,0,0.4)',
        popupBackground: '#fff',
        popupRadius: '12px',
        popupMargin: '30px',
        popupPadding: '30px',
        // Mobile rules
        showOnMobile: true,
        responsive: true,
        mobileBreakPoint: '480px',
        mobileLocation: 'center',
        mobileWidth: '100%',
        mobileHeight: '280px',
        mobileRadius: '0',
        mobileMargin: '0',
        mobilePadding: '24px',
        // Animate content
        contentAnimation: true,
        contentAnimationEffect: 'zoomIn',
        contentAnimationDuration: '0.4',
        contentAnimationDelay: '0.4',
        // Youtube videos
        videoSupport: true,
        videoAutoPlay: true,
        videoStopOnClose: true,
        // Close and reopen button
        addCloseButton: true,
        buttonStyle: 'icon',
        enableESC: true,
        reopenClass: 'openSlickModal-1',
        // Additional events
        onSlickLoad: function() {
            console.log("Slick is visible")
        },
        onSlickClose: function() {
            console.log("Slick is hidden")
        }
    });

});

Quick Installation

Before installation please check the requirements:

• jQuery 1.8+ loaded on your website
• PHP 5.6+ (incase you are using Slick Stats option)
• Apache 2x

In order to install Slick Modal popup into your html page, follow these few simple steps:

Open the 1. Quick start folder or choosen demo folder. Then open index.html document with your favorite text editor.
Once opened in editor, simply select all the code between the main comments ("START COPYING HERE" and "END COPYING HERE") and copy selected code to your document file right before closing </body> tag at the end of your page. Also include the plugin invoke and settings at the bottom of your document right before closing </body> tag and adjust the upload path of the plugin javascript file.

<!-- START COPYING HERE -->
<div id="popup-1" class="slickModal">
    <div class="slickWindow">
        <!-- Your popup content -->
        ... insert your modal content here (HTML, iframe or other object) ...
        <!-- / Your popup content -->
    </div>
</div>
<!-- Slick Modals jQuery plugin -->
<script type="text/javascript" src="UploadPath/slickModal.min.js"></script>
<!-- Slick modal settings -->
<script type="text/javascript">
    $(document).ready(function() {
        // Modal 1
        $('#popup-1').slickModals({
            // Hide on pages
            hideOnPages: [
                '/foo/page1/',
                '/foo/page2/',
                '/foo/page3/'
            ],
            // Popup type
            popupType: 'delayed',
            delayTime: 1000,
            scrollTopDistance: 400,
            // Auto closing
            autoClose: false,
            autoCloseDelay: 3000,
            // Statistics
            enableStats: false,
            fileLocation: 'slickStats/collect.php',
            modalName: 'My awesome modal 1',
            modalSummary: 'Lorem ipsum dolor sit amet',
            callToAction: 'cta',
            // Popup cookies
            setCookie: true,
            cookieDays: 30,
            cookieTriggerClass: 'setCookie-1',
            cookieName: 'slickModal-1',
            cookieScope: 'domain',
            // Overlay styling
            overlayVisible: true,
            overlayClosesModal: true,
            overlayColor: 'rgba(0,0,0,0.85)',
            overlayAnimationDuration: '0.4',
            overlayAnimationEffect: 'fadeIn',
            // Background effects
            pageAnimationDuration: '0.4',
            pageAnimationEffect: 'scale',
            pageBlurRadius: '1px',
            pageScaleValue: '0.9',
            pageMoveDistance: '30%',
            // Popup styling
            popupWidth: '480px',
            popupHeight: '280px',
            popupLocation: 'bottomRight',
            popupAnimationDuration: '0.4',
            popupAnimationEffect: 'zoomIn',
            popupBoxShadow: '0 0 20px 0 rgba(0,0,0,0.4)',
            popupBackground: '#fff',
            popupRadius: '12px',
            popupMargin: '30px',
            popupPadding: '30px',
            // Mobile rules
            showOnMobile: true,
            responsive: true,
            mobileBreakPoint: '480px',
            mobileLocation: 'center',
            mobileWidth: '100%',
            mobileHeight: '280px',
            mobileRadius: '0',
            mobileMargin: '0',
            mobilePadding: '24px',
            // Animate content
            contentAnimation: true,
            contentAnimationEffect: 'zoomIn',
            contentAnimationDuration: '0.4',
            contentAnimationDelay: '0.4',
            // Youtube videos
            videoSupport: true,
            videoAutoPlay: true,
            videoStopOnClose: true,
            // Close and reopen button
            addCloseButton: true,
            buttonStyle: 'icon',
            enableESC: true,
            reopenClass: 'openSlickModal-1',
            // Additional events
            onSlickLoad: function() {
                // Your code goes here
            },
            onSlickClose: function() {
                // Your code goes here
            }
        });

    });
</script>
<!-- / END COPYING HERE -->

Once you have pasted the html code then insert your elements between the "Your popup content" and "/ Your popup content" comments. You can put any elements inside it, your Contact form, signup form, video, map, iframe or other objects.

<!-- ========== START COPYING HERE ========== -->
<div id="popup-1" class="slickModal">
	<div class="slickWindow">
		<!-- Your popup content -->
		... your content goes here ...
		<!-- / Your popup content -->
	</div>
</div>
<!-- ========== END COPYING HERE ========== -->

Upload Slick Modal css and jquery file from /assets/css and /assets/js into your chosen folder on your webserver or local site. It's recommended that you use minified versions of both files for better performance.. Incase you are using a countdown also copy jquery.jCounter-0.1.4.js and datetime.php (this one goes to your website root folder).
Then call the css and jquery file(s). Call CSS from the <head> section and if possible call the jquery plugin right before closing </body> tag for better performance. Below is a demo of callings:

<head>
	... your site head elements
	<link rel="stylesheet" type="text/css" href="UploadPath/slickModal.min.css" media="screen" />
</head>

<body>
	... your site content
    ... Slick Modal HTML
	<script type="text/javascript" src="UploadPath/slickModal.min.js"></script>
    ... Slick Modal Plugin settings
</body>

Slick Modal comes with a simple statistics script which you can use to quickly check the stats of your modal. In order to enable the stats please follow these steps:

1. Copy slickStats folder to your webserver (located within 3. Slick stats folder).
2. Edit .htaccess in slickStats/preview-52893 folder and change the ::1 on line 9 to your IP address from which you will access the stats so the stats will be visible only to you. You can add multiple IP addresses separated by space in the same line.
3. Rename the preview-52893 folder to a name which only you will know.
4. Edit the plugin options within the plugin settings where you enable the stats, name your modal, create a summary and cta trigger along with adjusting the path for the collect.php file.
5. Visit the stats page to check if the stats are being saved (after enabling the modal), for example: http://doman.com/slickStats/preview-52893/.

To check the statistics you must visit the URL where you have uploaded the Slick Stats folder, for example: http://doman.com/slickStats/preview-52893/

Plugin options

Your popup consist from the options you give it by changing the settings inside the Slick jQuery file.
They give you control of modal's functionality, look and feel. They can be found at the end of the slickModal.min.js file. Below is an explanation of all avaliable options:

hideOnPages: [
    '/some/category-1/',
    '/some/other/page/',
    '/old/page/'
],

Be sure to use avaliable options only (in specification above). Note where you need to use quotation marks and specific units (pixels, percentages...). For reference see the setup below:

// Slick modal invoke
<script type="text/javascript">
    $(document).ready(function() {

        // Modal 1
        $('#popup-1').slickModals({
            // Hide on pages
            hideOnPages: [
                '/foo/page1/',
                '/foo/page2/',
                '/foo/page3/'
            ],
            // Popup type
            popupType: 'delayed',
            delayTime: 1000,
            scrollTopDistance: 400,
            // Auto closing
            autoClose: false,
            autoCloseDelay: 3000,
            // Statistics
            enableStats: false,
            fileLocation: 'slickStats/collect.php',
            modalName: 'My awesome modal 1',
            modalSummary: 'Lorem ipsum dolor sit amet',
            callToAction: 'cta',
            // Popup cookies
            setCookie: true,
            cookieDays: 30,
            cookieTriggerClass: 'setCookie-1',
            cookieName: 'slickModal-1',
            cookieScope: 'domain',
            // Overlay styling
            overlayVisible: true,
            overlayClosesModal: true,
            overlayColor: 'rgba(0,0,0,0.85)',
            overlayAnimationDuration: '0.4',
            overlayAnimationEffect: 'fadeIn',
            // Background effects
            pageAnimationDuration: '0.4',
            pageAnimationEffect: 'scale',
            pageBlurRadius: '1px',
            pageScaleValue: '0.9',
            pageMoveDistance: '30%',
            // Popup styling
            popupWidth: '480px',
            popupHeight: '280px',
            popupLocation: 'bottomRight',
            popupAnimationDuration: '0.4',
            popupAnimationEffect: 'zoomIn',
            popupBoxShadow: '0 0 20px 0 rgba(0,0,0,0.4)',
            popupBackground: '#fff',
            popupRadius: '12px',
            popupMargin: '30px',
            popupPadding: '30px',
            // Mobile rules
            showOnMobile: true,
            responsive: true,
            mobileBreakPoint: '480px',
            mobileLocation: 'center',
            mobileWidth: '100%',
            mobileHeight: '280px',
            mobileRadius: '0',
            mobileMargin: '0',
            mobilePadding: '24px',
            // Animate content
            contentAnimation: true,
            contentAnimationEffect: 'zoomIn',
            contentAnimationDuration: '0.4',
            contentAnimationDelay: '0.4',
            // Youtube videos
            videoSupport: true,
            videoAutoPlay: true,
            videoStopOnClose: true,
            // Close and reopen button
            addCloseButton: true,
            buttonStyle: 'icon',
            enableESC: true,
            reopenClass: 'openSlickModal-1',
            // Additional events
            onSlickLoad: function() {
                console.log("Slick is visible")
            },
            onSlickClose: function() {
                console.log("Slick is hidden")
            }
        });

    });
</script>

Faq

In this section we'll cover few basics with Slick Modal popup and some pointers on How to and Faq.

In order to have two or more modals you should create two html popup elements with different ID's and call the plugin settings for each of them. For example:

<!-- ========== YOUR FIRST POPUP ========== -->
<div id="popup-1" class="slickModal">
	<div class="slickWindow">
		<!-- Your popup content -->
		... your content for popup 1 goes here ...
		<!-- / Your popup content -->
	</div>
</div>

<!-- ========== YOUR SECOND POPUP ========== -->
<div id="popup-2" class="slickModal">
	<div class="slickWindow">
		<!-- Your popup content -->
		... your content for popup 2 goes here ...
		<!-- / Your popup content -->
	</div>
</div>

// Plugin invoke
$(document).ready(function() {
    $("#popup-1").slickModals({
        ... settings for popup 1 ...
    });
    $("#popup-2").slickModals({
        ... settings for popup 2 ...
    });
});

You can also check out the multiple popups demo inside 2. Demo layouts/ folder.

You can specify the popup initial width and height in pixels or percentages and use those values for responsivnes. You can also fine tune it via css media queries. For example - we wish the modal window has a 90% screen width at 480px viewport and smaller:

@media screen and (max-width: 480px) {
	.slickModal .window {
		width: 90% !important;
	}
}

To hide a modal simply add a class "closeModal" to element that submits the form. For example, if you have input that submits the form you can add a class to it:

<input type="submit" class"closeModal-1" value="Submit" />

As mentioned, to hide a modal simply add a class to element you wish (same as the previous answer).

Altough Slic Modal is not made as a plugin or module it can still be installed manualy into any CMS. You can follow the quick install guide by editing coresponding CMS template files. Be sure to create backup before manual installation. Support for installing the modal into CMS's is not provided.

The demos in that folder are for reference and demo purpouses only for your ease of use. You can use them for your own projects, but the support for modifications and extended functionality of those demos is not provided.

Edit the Slick css and search for content: "Close" with the editors search command if you are using minified Slick css or look for the following selector and change the text inside the content attribute:

.slickModal .close.text:before {
	color: #fff;
	content: "Close";
	font-size: 9px;
	text-transform: uppercase;
}

Open the Slick Modal jQuery and add a background url to the overlayColor option, like this:

	overlayColor: "url('images/bg.jpg') no-repeat center center / cover",

You can also check out the Background image demo inside 2. Demo layouts folder.

You can disable the popup's type so it's not delayed, scroll or exit simply by setting the popupType to 'none' in the plugin popupType options like this:

$(document).ready(function() {
    $('#popup-1').slickModals({
        // Popup type
        popupType: 'none',
        ...
    });
});

Countdown in the demos is made by 3rd party author. That author provides simple explanation within the plugin comments on it's website: jCounter which should be fairly easy to setup. Within the plugin you can also change the timezone and translations.

In that case you are probably using Wordpress or a site with other libraries which might conflict with jQuery. To avoid conflicts you should set the jQuery library to noConflict mode: jQuery noConflict.

When you wish to use responsive mode you need to set responsive option to true. This way the responsive rules will be applied to the popup frame. Then you need to set a mobileBreakPoint which will be the point when the popup will accept responsive rules (such as width and height). After that you simply define the popup height, width, border radius, margin and padding withi the same set of options below the mobileBreakPoint option. Note that you will probably still need to define the inner content rules within the css manually by applying the media querie rules. This cannot be controled from the plugin itself as the elements inside the popup are user defined eg. by you. More about media queries on W3Schools

First you need to rename the preview-52893 folder to your own name so you will be the only one to know it hence preventing unwanted access. Then you need to edit the .htaccess file inside that folder and change the ::1 on line 9 (allow from ::1) to your IP address. Lastly check if the URL is matching the upload folder of the stats.

Yes, you can parse by collecting the data from data.json file or edit the collect.php to either save the file to your new location or to save it in your format you need.

Some graphic elements and images are licensed in a way that they cannot be distributed along with the item. In that case you need to insert your own image or graphics.

Altough the contact form doesn't come with a server side script to submit mails, you can use the simple script below. Usage:

1. Create a new php file with your favorite text editor and copy the code below.
2. Edit the parameters in the code (receiver email, subject...) and save it with some logical name (for example: sendEmail.php).
3. Upload the file to your web server.
4. Edit the Slick Modal HTML that you used for the form and look for url: 'yourScript.php' and change the path to your file where you have uploaded it.
5. Test the form if it works, else preview the steps above.

<?php

    $name = $_POST['name'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $message = $_POST['message'];

    if (!empty($name) && filter_var($email, FILTER_VALIDATE_EMAIL) && !empty($phone) && !empty($message)) {
        // Fields, which will be included in the email
        $formcontent="Name: $name \nEmail: $email \nPhone: $phone \nMessage: $message";
        // Insert your email below
        $recipient = "youremail@domain.com";
        // Change the subject of the form below
        $subject = "Contact Form subject goes here";
        $mailheader = "From: $email \r\n";
        mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
    } else {
        exit('Inputs are not valid!');
    }

?>

Please check if you have uploaded dateandtime.php file from the assets folder to your website root directory.

To use the generator open index.html within the 4. Modal generator folder. Generator enables you to quickly customize the modal by adjusting the settings within it and preview the live in your browser. After you are satisfied with the modals look simply click Generate button and the settings for your popup will be generated. Use them by following the instructions within the popup of the generated settings or by checking the Quick install section.

Tricks and tips

In order for popup's to show properly you shouldn't mix popup types when using multiple popups. For example, popup-1 can have a delayed type, but popup-2 should have scrolled or exit type. Keep an eye so that popups don't overlap themselfs.

Blur & scale are nice effects but they also affect the site performance as it has to redraw all the elements upon firing the animation. So to make your site more user friendly it's recommended to use lower blur and scale values. Optimal is 1-2 px for blur and 0.9 or 1.1 for scale. It's not recommended to use them both simultaneously on the same page as it will reduce the performance of the site dramatically.

If you're stuck with your layout and have issues you can't fix immidiately, i recommend you first try to debug the site with firebug or native browser element inspector (eg. right click --> Inspect element).
This will also help you build your custom layout faster and understand the shematics of how things work in Slick Modal popup.

From the performance point it is good practice to use minifed css and js version of the Slick Modal.

Additional notes

Special thanks for jCounter countdown plugin to Catalin Berta.

Support

If you get stuck with the installation, usage or modification of the item's, contact me via email support@justcapelle.com or send me a message on Codecanyon.
When you submit a support ticket, please provide much information as possible, for example:

- Your Envato username
- Detailed issue
- URL where you use the item


Thank you again for using Slick Modal. Dont forget to rate :)